import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//这里引入element-UI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入全局css和element-reset  引入css样式可以直接引入
import "@/assets/css/el-reset.css"
import "./assets/css/global.css"

//引入icon图标
import "@/assets/icons/iconfont.css"

//引入鉴权方法
import has from "./utils/has"

//将方法添加到全局
Vue.prototype.$has = has;
Vue.use(ElementUI);
// Vue.config.productionTip = false

//定义全局自定义指令 判断是都具有相应按钮权限
Vue.directive("haspermission",{
  bind(el, binding, VNode){
    let buttons = localStorage.getItem("user-permission")
    buttons = JSON.parse(buttons)
    // console.log(el);     //对应的按钮
    // console.log(binding); //当前按钮的对象
    // console.log(has(binding.value));
    if(!has(buttons,binding.value)){
      //没有权限，禁用按钮
      // console.log(el);
      // console.log(el.className);
      //先储存className，在这基础上加上is-disabled禁用按钮
      let className = el.className
      el.className = className + " " + "is-disabled"   //这样是给一个不能点击的样式
      el.disabled = true      //这是禁止点击功能
      // console.log(el);
    }
  }
})


//(路由前置钩子)路由守卫  由于拦截跳转，必须满足条件才可以
router.beforeEach((to, from, next) =>{
  // console.log(1253);
  // console.log("to");  
  // console.log(to);    //去哪
  // console.log('from');
  // console.log(from);   //从哪来
  //注册和登录可以给用户访问，其他页面不给访问
  if(to.path === "/login" ){  //访问登录页面，放行
    next()
  } else{  //访问别的页面
    //判断是否登入  判断是否有token
    let token = localStorage.getItem("user-token")
    if(token){
      //先判断vuex中sideMenu是不是一个空数组 如果空数组，那么要触发action获取用户菜单
      let { sideMenu } = store.state
      if(sideMenu && sideMenu.length>0){  //如果state中的sideMenu长度为0 说明没有 需要重新获取
        next()
      }else{
        store.dispatch("FETCH_MENULIST") //如果没有,那么开始获取
        .then(function(){
          // console.log(router);
          // console.log(sideMenu);
          //next里面要传参数即要进入的页面的路由信息，因为next传参数后，当前要进入的路由会被废止，转而进入参数对应的路由，虽然是同一个路由，这么做主要是为了确保addRoutes生效了。
          next({ path: to.path })
        })
      }
    } else{
      next({path:"/login"})
    }
  }
})

//全局后置钩子
router.afterEach((to,from) => {
  // console.log(to);
  // console.log(from);
  store.commit("SET_CRUMB", to.matched)
})



new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
